<template>
  <div :class="[boolean.rightShow ? 'block' : 'hidden']"
    class="right-side absolute right-0 top-0 w-440px h-full box-border pl-20px pt-80px pb-20px z-3">
    <div class="w-400px flex">
      <div class="text-#fff pl-22px flex-1 flex items-center h-30px tab-item text-17px " v-for="tab in pannelTabs"
        :key="tab.type" @click="activeTab = tab.type" :class="{ 'tab-item-active': activeTab === tab.type }">
        {{ tab.name }}
      </div>
    </div>

    <div v-show="activeTab === 1" class="content">
      <div class="text-#fff flex justify-center items-center mt-100px" v-if="isEmptyFullDay">暂无数据</div>
      <template v-else>
        <AccidentInfoPannel @click="onInfoPannelClick(item)" v-for="(item, index) in fullDayData" :key="index"
          v-bind="{ ...item, index }" />
      </template>
    </div>

    <div v-show="activeTab === 2" class="content">
      <div class="text-#fff flex justify-center items-center mt-100px" v-if="isEmptyHistory">暂无数据</div>
      <template v-else>
        <AccidentInfoPannel @click="onInfoPannelClick(item)" v-for="(item, index) in historyData" :key="index"
          v-bind="{ ...item, index }" />
      </template>
    </div>

    <!-- <div v-show="activeTab === 3" class="content">
        <div class="empty-placeholder" v-if="isEmptyFollowed">暂无数据</div>
        <template v-else>
          <AccidentInfoPannel v-for="(item, index) in followedData" :key="index" v-bind="{ ...item, index }" />
        </template>
      </div> -->

    <div class="plan-title mt-20px"><span class="text-gradient-white-to-teal-right">事故热点位置</span></div>
    <div v-if="hotByAddress.length > 0" class="h-260px px-20px">
      <el-input v-model="hotSearch" @input="filterHotAddress" class="mb-10px" placeholder="请输入事故位置名称" />
      <div class="h-210px overflow-y-auto">
        <div v-for="i in newHotByAddress" :key="i" @click="handelHotAddress(i)"
          class="w-100% h-32px leading-32px px-8px box-border text-#fff overflow-hidden whitespace-nowrap text-ellipsis hover:bg-#000/50">
          {{ i.address }}</div>
      </div>
    </div>
    <div v-else class="text-#fff flex justify-center items-center h-200px">暂无数据</div>

    <!-- 大队事故数比对 -->
    <!-- <div class="plan-title mt-20px"><span class="text-gradient-white-to-teal-right">大队事故数比对</span></div>
    <div class="text-#fff flex justify-center items-center h-200px" v-if="isEmptyGroupChart">暂无数据</div>
    <div v-else ref="groupBarRef" class="h-250px w-90%" @click="handleBarClick"></div>
    <Daduishiguduibi /> -->

    <!-- 事故高发地点排行 -->
    <div class="plan-title mt-20px"><span class="text-gradient-white-to-teal-right">事故高发地点排行</span></div>
    <div class="text-#fff flex justify-center items-center h-250px" v-if="isEmptyRankChart">暂无数据</div>
    <div ref="rankBarRef" class="h-320px w-90%" @click="handleBarClick1"></div>
    <Shigugaofaluduan />
  </div>
  <el-dialog class="info-modal" :draggable="true" v-model="dialogVisible" :modal="false" title="事故详情" width="360">
    <div class="label-row">
      <span class="text-#fff">警情类型：</span>
      <span class="text-#fff">{{ dialogInfo.sglx }}</span>
    </div>

    <div class="label-row">
      <span class="text-#fff">处置单位：</span>
      <span class="text-#fff">{{ dialogInfo.bmmc }}</span>
    </div>

    <div class="label-row">
      <span class="text-#fff">报警时间：</span>
      <span class="text-#fff">{{ dialogInfo.sgfssj }}</span>
    </div>

    <div class="label-row">
      <span class="text-#fff">警情位置：</span>
      <span class="text-#fff">{{ dialogInfo.sgdd }}</span>
    </div>

    <div class="label-row">
      <span class="text-#fff">警情描述：</span>
      <span class="text-#fff">{{ dialogInfo.jyaq }}</span>
    </div>
  </el-dialog>

  <!-- 展开收起 -->
  <img :class="['absolute top-[40%] z-[2] w-40px h-40px ', boolean.rightShow ? 'rotate-180 right-440px' : 'right-0']"
    @click="boolean.rightShow = !boolean.rightShow" :src="getAssets('home/arrow-1.png')" />
</template>

<script setup>
import { getAssets } from "@/utils";
import { useBoolean } from "@/store";
import AccidentInfoPannel from "./accident-info-pannel.vue";
import {
  useAccidentPannelInfo, useAccidentTopRankBarChart,
  // useAccidentGroupBarChart,
} from "@/hooks/dashboard/useRightCharts.js";

const props = defineProps({
  hotByAddress: {
    type: Array,
    default: () => []
  }
});

const boolean = useBoolean();
const hotSearch = ref('');
const newHotByAddress = ref([]);
const {
  isEmptyHistory,
  isEmptyFullDay,
  activeTab,
  pannelTabs,
  historyData,
  fullDayData,
  getHomeAccidentInfoData,
  onInfoPannelClick,
  dialogVisible,
  dialogInfo,
} = useAccidentPannelInfo();
getHomeAccidentInfoData();

// const { groupBarRef, isEmptyGroupChart, handleBarClick } = useAccidentGroupBarChart();
const { rankBarRef, isEmptyRankChart, handleBarClick1 } = useAccidentTopRankBarChart();

watchEffect(() => {
  newHotByAddress.value = props.hotByAddress;
})

const filterHotAddress = useDebounceFn(() => {
  const deepCloneHotData = JSON.parse(JSON.stringify(props.hotByAddress));
  newHotByAddress.value = hotSearch.value ? deepCloneHotData.filter(item => item.address.includes(hotSearch.value)) : deepCloneHotData;
}, 100)

const handelHotAddress = (item) => {
  const { mapEvent } = window.cesiumInit;
  mapEvent.flyToPoint({ lng: item.longitude, lat: item.latitude, alt: 1400 });
}
</script>

<style lang="less" scoped>
:deep(.info-modal) {
  background-color: #00313799;
  position: relative;

  .label-row {
    color: #fff;

    .label {
      color: #fff;
      font-weight: 700;
    }

    .value {
      color: #fff;
      //color: #d7d7d7;
    }
  }

  .el-dialog__body {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff !important;
  }
}

.hot-address {
  background: url("@/assets/img/home/bg-5.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>
<style lang="less" scoped>
.right-side {
  background: url("@/assets/img/home/bg-7.png") no-repeat center center;
  background-size: 100% 100%;
}

.tab-item {
  background: url("@/assets/img/home/tab-bg.png") no-repeat center center;
  background-size: 100% 100%;
}

.tab-item-active {
  background: url("@/assets/img/home/tab-bg-a.png") no-repeat center center;
  background-size: 100% 100%;
}

.content {
  position: relative;
  height: 250px;
  overflow: auto;
}
</style>
